<template>
  <div class="global">
    <div class="divItem">
      这是一个网页，按<span style="font-weight: bolder">"F12"</span>可以打开调试器。
    </div>
    <div class="divItem">
      这个示例展示了wps加载项的相关基础能力，与B/S业务系统的交互，请用浏览器打开：
      <span style="font-weight: bolder; color: slateblue; cursor: pointer" @click="onOpenWeb()">{{
        DemoSpan
      }}</span>
    </div>
    <div class="divItem">
      开发文档:
      <span style="font-weight: bolder; color: slateblue">https://open.wps.cn/docs/office</span>
    </div>
    <hr />
    <div class="divItem">
      <button style="margin: 3px" @click="onbuttonclick('dockLeft')">停靠左边</button>
      <button style="margin: 3px" @click="onbuttonclick('dockRight')">停靠右边</button>
      <button style="margin: 3px" @click="onbuttonclick('hideTaskPane')">隐藏TaskPane</button>
      <button style="margin: 3px" @click="onbuttonclick('addString')">文档开头添加字符串</button>
      <button style="margin: 3px" @click="onDocNameClick()">取文件名</button>
    </div>
    <hr />
    <div class="divItem">
      文档文件名为：<span>{{ docName }}</span>
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import axios from 'axios'
import taskPane from './js/taskpane.js'
export default {
  name: 'TaskPane',
  data() {
    return {
      DemoSpan: '',
      docName: ''
    }
  },
  methods: {
    onbuttonclick(id) {
      return taskPane.onbuttonclick(id)
    },
    onDocNameClick() {
      this.docName = taskPane.onbuttonclick('getDocName')
    },
    onOpenWeb() {
      taskPane.onbuttonclick('openWeb', this.DemoSpan)
    }
  }
}
onMounted(() => {
  axios.get('/.debugTemp/NotifyDemoUrl').then((res) => {
    this.DemoSpan = res.data
  })
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.global {
  font-size: 15px;
  min-height: 95%;
}
.divItem {
  margin-left: 5px;
  margin-bottom: 18px;
  font-size: 15px;
  word-wrap: break-word;
}
</style>
